import { AppBar, Box, Button, Divider, Stack, Tabs, Toolbar, Typography } from '@mui/material';
import React, { JSX } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import NulMainTab from '../../components/NulMainTab';
import PersonIcon from '@mui/icons-material/Person';
import ImageSearchIcon from '@mui/icons-material/ImageSearch';
import { useAppDispatch } from '../../actions/hooks';
import { authActions } from '../../actions/Auth';
import '@fontsource/inter';
import '@fontsource/open-sans';
import './index.css';
import AnalyzeText from '../AnalyzeText';
import PersonalInformation from '../PersonalInformation';
import { profileActions } from '../../actions/Profile';

const moduleName: string[] = [
  '',
  'profile',
  '',
  '',
  'analyze',
];

function MainFramework(): JSX.Element {

  const { id } = useParams();

  const dispatch = useAppDispatch();
  const navigate = useNavigate();

  const moduleList: (JSX.Element | undefined)[] = [
    undefined,
    (<PersonalInformation />),
    undefined,
    undefined,
    (<AnalyzeText />),
  ];

  let content: JSX.Element | undefined = undefined;
  let contentIndex: number = 0;
  if (id !== undefined) {
    contentIndex = moduleName.indexOf(id);
    content = moduleList[contentIndex];
  }

  return (
    <div id='nul-main-framework'>
      <Box width='100%' minHeight='100vh' display='flex' flexDirection='column'>
        <AppBar position="static" sx={{
          height: '50px', boxShadow: 'none', background: '#1565c0', display: 'flex', alignContent: 'center', justifyContent: 'center',
          width: '100%'
        }}>
          <Toolbar sx={{ height: '70px' }}>
            <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
              文本情感分析系统
            </Typography>
            <Button color="inherit" onClick={() => {
              dispatch(authActions.clear());
              dispatch(profileActions.clear());
              navigate('/login');
            }}>退出</Button>
          </Toolbar>
        </AppBar>
        <Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'row' }} >
          <Box>
            <Sider selected={contentIndex} />
          </Box>
          <Box sx={{ flex: 'none', order: 1, flexGrow: 1, position: 'relative' }}>
            {content}
          </Box>
        </Box>
        <Box width='100%' height='40px' marginBottom={0}>
          <Footer />
        </Box>
      </Box>
    </div>
  );
}

interface SiderProps {
  selected: number;
};

function Sider(props: SiderProps): JSX.Element {

  const navigate = useNavigate();

  const handleChange = (event: React.SyntheticEvent, newValue: number): void => {
    if (newValue !== props.selected) {
      navigate('/main/' + moduleName[newValue]);
    }
  };

  return (
    <Box sx={{ borderRight: '1px solid #DFE4E8', height: '100%' }}>
      <Stack
        justifyContent='flex-start'
        sx={{
          paddingBottom: '12px',
          backgroundColor: '#ffffff',
          boxSizing: 'border-box',
        }}
      >
        <Tabs
          orientation="vertical"
          variant="scrollable"
          value={props.selected}
          aria-label="Vertical tabs example"
          onChange={handleChange}
          sx={{ justifyContent: 'flex-start' }}
          TabIndicatorProps={{
            style: {
              display: 'none',
            },
          }}
        >
          <Box className='SiderText'>
            用户管理
          </Box>
          <NulMainTab
            icon={<PersonIcon sx={{ fontSize: '18px' }} />}
            label='个人信息'
          />
          <Divider />
          <Box className='SiderText'>
            分析文本
          </Box>
          <NulMainTab
            icon={<ImageSearchIcon sx={{ fontSize: '18px' }} />}
            label='文本分析'
          />
        </Tabs>
      </Stack>
    </Box>
  );
}

function Footer(): JSX.Element {
  return (
    <Box sx={{
      background: '#1565c0',
      height: '100%',
      bottom: 0,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      flexDirection: 'column'
    }}>
      <Box
        sx={{
          color: '#FFFFFF',
          fontSize: '14px',
          fontFamily: 'Open Sans'
        }}
      >
        Copyright (C) NulStudio 2014-2023.
      </Box>
    </Box>
  )
}

export default MainFramework;